@font-face {
  font-family: "bossVersion";
  src: url("/static/font/bossVersion/iconfont.woff") format("woff");
}

.bossVersion {
  font-family: "bossVersion" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// flex
@mixin flex {
  display: flex;
}
@mixin flexXjsbYcen {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@mixin flexXjsaYcen {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
@mixin flexXcen {
  display: flex;
  justify-content: center;
}
@mixin flexYcen {
  display: flex;
  align-items: center;
}
@mixin flexXYcen {
  display: flex;
  justify-content: center;
  align-items: center;
}
@mixin flexYbase {
  display: flex;
  align-items: baseline;
}
@mixin flexYend {
  display: flex;
  align-items: flex-end;
}
@mixin flexFdc {
  display: flex;
  flex-direction: column;
}
@mixin flexFdcXcen {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@mixin flexFdcXcenYcen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

// position
@mixin absoluteAllSides($top: 0, $right: 0, $bottom: 0, $left: 0, $z: 0) {
  position: absolute;
  top: $top + px;
  right: $right + px;
  bottom: $bottom + px;
  left: $left + px;
  z-index: $z;
}
@mixin absoluteTLSide($top: 0, $left: 0, $z: 0) {
  position: absolute;
  top: $top + px;
  left: $left + px;
  z-index: $z;
}
@mixin absoluteBLSide($bottom: 0, $left: 0, $z: 0) {
  position: absolute;
  bottom: $bottom + px;
  left: $left + px;
  z-index: $z;
}
@mixin absoluteTRSide($top: 0, $right: 0, $z: 0) {
  position: absolute;
  top: $top + px;
  right: $right + px;
  z-index: $z;
}
@mixin absoluteBRSide($bottom: 0, $right: 0, $z: 0) {
  position: absolute;
  bottom: $bottom + px;
  right: $right + px;
  z-index: $z;
}

// color
$color0: rgba(#090928, 0.5);
$color1: #48e5ff;
$color2: #00ffff;
$color3: #f0bd26;
$color4: #28e787;
$color5: #ff3e9a;
$color6: rgba(#48e5ff, 0.7);
$color7: #088ceb;
$color8: #ff0000;
$color9: rgba(#00d1ff, 0.1);
$budget: #ff7145;
$mainBlue: #00d1ff;

.rise {
  width: 10px;
  height: 10px;
  margin-left: 5px;
  background: url("/static/img/bossVersion/rise.png") left top no-repeat / 100%
    100%;
}
.decline {
  width: 10px;
  height: 10px;
  margin-left: 5px;
  background: url("/static/img/bossVersion/decline.png") left top no-repeat /
    100% 100%;
}

// font
$defaultFontSize: 20px;
@mixin bold($size) {
  font-weight: bold;
  font-size: $size;
}
@mixin din($size) {
  font-family: DIN Condensed Bold;
  font-size: $size;
}

// background
$mainBack: radial-gradient(at 50% -20%,#00239b, #000039);
$headBack: rgba(#121246, 0.6);
$contentBack: rgba(#000, 0.2);
$dataBack: rgba(#000, 0.4);
$circleBack: #010b44;

// border
@mixin borderAll {
  border: 1px solid rgba($color1, 0.2);
}
@mixin borderRight {
  border-right: 1px solid rgba($color1, 0.2);
}

// head
@mixin headFont {
  color: $color6;
  font-size: 20px;
}

@mixin headActFont {
  color: $color1;
  font-size: 20px;
}

// sideNav
@mixin sideFont {
  color: $color1;
  font-size: 16px;
}
@mixin sideActFont {
  color: $color3;
  font-size: 20px;
  font-weight: bold;
}

// mainView
@mixin view {
  position: relative;
  background-color: $contentBack;
  @include borderAll;
}

@mixin viewPad {
  position: relative;
  padding: 22px;
  padding-top: 28px;
  background-color: $contentBack;
  @include borderAll;
}

.chartTips {
  color: $color1;
  font-size: 14px;
}

.noDataCon-identi span {
  color: $color1 !important;
}

// flex
.flexYbase { display: flex; align-items: baseline; }
.inlineFlexYbase { display: inline-flex; align-items: baseline; }

// relative
.relBot { position: relative; bottom: -4px; }